import React, { useState } from "react";
import context from "@/context";
import { Button } from "antd";
const { ColorContext } = context;

export default function ChangeColors() {
    const [colorList] = useState([
        { title: "青色", color: "cyan" },
        { title: "天空蓝", color: "skyblue" },
        { title: "紫色", color: "purple" },
    ]);
    return (
        <ColorContext.Consumer>
            {({ dispatch }) =>
                colorList.map(({ title, color }, index) => (
                    <Button key={index} onClick={() => dispatch({ type: "SET", color })}>
                        {title}
                    </Button>
                ))
            }
        </ColorContext.Consumer>
    );
}
